<template>
  <div class="seven_content myStyle">
    <div class="content_center">
      <div class="title_box">
        <div class="top">
          <div class="border"></div>
          <span>统计分析 </span>
        </div>
      </div>
      <div class="echartsBox">
        <!-- 01报警类型分析 -->
        <StrokeTitle3 title="报警类型分析" class="title_box_bc" style="width: 49%; height: 46%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <div class="flex_center Echarts">
            <XRow class="cntjEcharts" :data="data1" barRight="15%" barLeft="13%" barWidth="6" xUnit="次"></XRow>
          </div>
        </StrokeTitle3>
        <!-- 02报警占比分析 -->
        <StrokeTitle3 title="报警设备分析" class="title_box_bc" style="width: 49%; height: 46%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <div class="flex_center Echarts">
            <PieImg :data="data2" legendLabel="次" legendLeft="57%" length="5" itemWidth="1" cirLeft="1.7" legendHeight="85%" :img="require('@/assets/images/echarts/24.png')" />
          </div>
        </StrokeTitle3>
        <!-- 03报警次数分析 -->
        <StrokeTitle3 title="报警次数分析" class="title_box_bc" style="width: 49%; height: 46%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <div class="flex_center Echarts">
            <div class="calculagraph_left flex_center">
              <Ring style="width: 100%; height: 90%" :data="data3.zjh" width="1.3" />
            </div>
            <div class="calculagraph_right">
              <StrokeItem2 title="上次报警次数" :number="data3.scbjcs" />
              <StrokeItem2 title="变化比率" :number="data3.hb" unit="%" />
            </div>
          </div>
        </StrokeTitle3>
        <!-- 04报警设备分析 -->
        <StrokeTitle3 title="报警设备分析" class="title_box_bc" style="width: 49%; height: 46%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <div class="flex_center Echarts">
            <PieImg :data="data4" legendLabel="次" legendLeft="57%" length="5" itemWidth="1" cirLeft="1.7" legendHeight="85%" :img="require('@/assets/images/echarts/25@2x.png')" />
          </div>
        </StrokeTitle3>
      </div>
    </div>
  </div>
</template>

<script>
import StrokeItem2 from "@/components/myComponents/stroke/item2.vue"; //容器
import StrokeTitle3 from "@/components/myComponents/stroke/title3.vue"; //容器
import PieImg2 from "@/components/echarts/pie/img2.vue";
export default {
  components: {
    StrokeTitle3,
    PieImg2,
    StrokeItem2,
  },
  data() {
    return {
      model: "month",
      // 01报警类型分析
      data1: [
        { name: "设备1", value: 95 },
        { name: "设备2", value: 78 },
        { name: "设备3", value: 70 },
        { name: "设备4", value: 58 },
        { name: "设备5", value: 55 },
      ],
      // 02报警占比分析
      data2: [
        { name: "设备1", value: 521 },
        { name: "设备2", value: 3121 },
        { name: "设备3", value: 221 },
        { name: "设备4", value: 521 },
        { name: "设备5", value: 521 },
      ],
      // 03报警次数分析
      data3: {
        zjh: { num: "442421", baifenbi: "122" },
        scbjcs: "230次",
        hb: "-2",
      },
      // 04报警设备分析
      data4: [
        { name: "设备5", value: 531 },
        { name: "设备6", value: 121 },
        { name: "设备7", value: 2221 },
        { name: "设备8", value: 521 },
        { name: "设备9", value: 521 },
      ],
      color: ["blue", "orange", "green", "pink"],
    };
  },
  methods: {
    radioChange() {},
  },
};
</script>


<style lang="scss" scoped>
.title_box_bc {
  box-shadow: 0 0 3px 3px rgb(52 112 167 / 90%);
}
.calculagraph_right,
.calculagraph_left {
  width: 57%;
  height: 100%;
  // background: red;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  float: left;
}
.calculagraph_right {
  align-items: flex-start;
  justify-content: center;
  width: 50%;
  height: 95%;
  max-width: 240px;
  position: relative;
  right: 12%;
  // margin-left: -4%;
}
.seven_content {
  z-index: 10;
  background: #093b76;
  width: 100%;
  height: 100%;
  overflow: auto;
  .content_center {
    //  background: yellow;
      // background: red;
    width: 100%;
    height: 92%;
    .title_box {
      position: relative;
      float: left;
      width: 100%;
      margin-bottom: 1%;
      margin-right: 1%;
      .top {
        height: 40px;
        width: 100%;
        border-bottom: 1px solid #2a8cf04a;
        display: flex;
        padding: 0 15px;
        align-items: center;
        .border {
          width: 3px;
          height: 16px;
          background: #06ffff;
        }
        span {
          font-size: 16px;
          font-family: Adobe Heiti Std, Adobe Heiti Std-R;
          font-weight: R;
          text-align: left;
          margin-left: 10px;
          color: #ffffff;
        }
      }
    }
  }
  .content_center {
    .echartsBox:after,
    .echartsBox:before {
        content: "";
        display: block;
        clear: both;
    }
    .echartsBox {
      width: 100%;
      height: 100%;
      // display: flex;
      // justify-content: space-between;
      // flex-wrap: wrap;
      padding: 0.5% 0.8% 0.5%;
      .jxb_right {
        width: 260px;
        height: 150px;
        margin-left: 30px;
        // background: red;
        .left {
          display: flex;
          flex-direction: column;
          align-items: center;
          .big_cir {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #086088;
            .small_cir {
              width: 22px;
              height: 22px;
              border-radius: 50%;
              border: 2px solid #02d5c2;
            }
          }
          .big_cir_blue {
            border: 1px solid #105b95;
            .small_cir_blue {
              border: 2px solid #1c9ad5;
            }
          }
          .and {
            width: 2px;
            height: 20px;
            margin: 8px 0;
            background: -moz-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -webkit-gradient(
              linear,
              left top,
              left bottom,
              color-stop(0%, #02d5c2),
              color-stop(100%, #1c9ad5)
            );
            background: -webkit-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -o-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -ms-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: linear-gradient(to bottom, #02d5c2 0%, #1c9ad5 100%);
          }
        }
        .right {
          .item {
            width: 200px;
            height: 52px;
            border: 1px solid #086088;
            margin: 20px 10px;
            padding: 0 20px;
            .title,
            .number {
              font-size: 13px;
              color: #00ebcd;
            }
            .number {
              font-weight: 700;
            }
          }
          .item_blue {
            border: 1px solid #105b95;
            .title,
            .number {
              color: rgba(35, 195, 255, 1);
            }
          }
        }
      }
    }
  }
  .Echarts {
    height: calc(100% - 50px);
  }
}
</style>